// All elements are given the following CSS attributes:
// position: absolute
// left: (x position)
// top: (y position)
// .reset counteracts these attributes
.reset() {
  position: relative;
  left: initial;
  top: initial;
}

/* Mixins for support for systems before El Capitan */
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}"; // Yosemite & older support
	display: @display;
}
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction; // Yosemite & older support
          flex-direction: @direction;
}

/* flexBox.sketch CSS */

.row {
  .reset;
  .flex-display(flex);
  .flex-direction(row);
  margin-top: 200px;
  width: 1800px;
}
.column:first-child {
  background-color: #B65A59;
}
.column:nth-child(2) {
  background-color: #6B9EC3;
}
.column:last-child {
  background-color: #9A4E97;
}
.column {
  .reset;
  width: 200px;
  height: 200px;
  margin-left: 70px;
  border: 12px solid rgba(0, 0, 0, .1);
  box-sizing: border-box;
}

[name="colors"] {
  .reset;
  top: initial;
  left: initial;
  position: absolute;
  .flex-display(flex);
  .flex-direction(row);
  margin-top: 160px;
  right: 100px;
  width: 500px;
}

[name="color"] {
  .reset;
  width: 100px;
  height: 100px;
  margin-left: 60px;
  border: 12px solid rgba(0, 0, 0, .1);
  box-sizing: border-box;
}
